<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/js/echarts.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <script src="/videoWeb/js/axios.js"></script>
    <title>视频统计</title>
</head>
<body>

<div id="app">

    <el-container style="height: 100%;">
        <el-aside width="200px">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <el-menu-item index="1">
                            <i class="el-icon-video-camera-solid"></i>
                            <span slot="title">视频统计</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-video-camera-solid"></i>
                            <span slot="title">视频管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right;
                       font-size: 12px;
                       background-color: white;
                       border-bottom: 1px solid rgb(230,230,230);">

                <el-breadcrumb separator="/" style="float: left;margin-top:25px;">
                    <el-breadcrumb-item :to="{ path: '/' }">导航一</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/videoWeb/afters/video.html">视频统计</a></el-breadcrumb-item>
                </el-breadcrumb>

            </el-header>

            <el-main>
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="myChart" :style="{width: '90%px', height: '600px'}"></div>
            </el-main>

        </el-container>
    </el-container>

</div>

</body>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                num:[]
            }
        },
        created(){
            this.selectVideoCount();
        },
        methods:{
            selectVideoCount(){//
                $.ajax({
                    url:"/videoWeb/selectVideoCount",
                    data:{
                    },
                    success:(res)=>{
                        console.log(res)
                        this.num = res.count;
                        this.$nextTick(()=>{
                            this.drawLine();
                        })//后执行echarts
                    }
                })
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '统计今年视频数量' },
                    tooltip: {},
                    xAxis: {
                        data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
                    },
                    yAxis: {},
                    series: [{
                        color: '#03AAE1',
                        name: '统计数量',
                        type: 'bar',
                        data: this.num,
                    }],

                });
            }
        }
    })
</script>
</html>